<style lang="less">
    .search-filter-wrap-more {
        font-size: 0.9rem;

        .el-collapse-item__header, .el-collapse-item__wrap, .focusing, .is-active, .el-collapse {
            border: none;
        }
        .el-collapse-item__header{
            height: 0;
            display: none;
        }
        .el-divider__text{
            padding: 0;
        }
        .el-divider--horizontal{
            margin-bottom: -10px;
        }
        .el-icon-arrow-right,.el-icon-arrow-down{
            border: grey solid 1px;
            border-radius: 50%;
        }
    }
</style>
<template>
  <div class="search-filter-wrap-more">

    <i :class="activeNames.length===0?'el-icon-arrow-right':'el-icon-arrow-down'" style="float: right" @click="showMore" />
    <el-collapse v-model="activeNames">&emsp;
      <el-collapse-item name="default">
        <slot />
      </el-collapse-item>
    </el-collapse>

  </div>

</template>

<script>

import { deepClone } from '../../util/util'

export default {
  name: 'SearchFilterMore',
  props: {
  },
  data() {
    return {
      show: true,
      activeNames: []
    }
  },
  methods: {
    showMore() {
      const that = this
      if (this.activeNames.length > 0) {
        this.activeNames = []
        that.show = true
      } else {
        this.activeNames = ['default']
        this.show = false
      }
    }
  }
}
</script>

<style scoped>

</style>
